﻿@namespace MudBlazor.Docs.Examples
@*Keyframes by https://animate.style/*@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style type="text/css">

    .bounceIn {
        opacity: 0;
        animation-delay: 0.5s;
        animation-duration: 0.5s;
        animation-name: bounceIn;
        animation-fill-mode: forwards;
    }

    .bounceOut {
        animation-duration: 0.5s;
        animation-name: bounceOut;
        animation-fill-mode: forwards;
    }

    .backInDown {
        opacity: 0;
        animation-delay: 0.5s;
        animation-duration: 0.5s;
        animation-name: backInDown;
        animation-fill-mode: forwards;
    }

    .backOutDown {
        animation-duration: 0.5s;
        animation-name: backOutDown;
        animation-fill-mode: forwards;
    }

    .rotateIn {
        opacity: 0;
        animation-delay: 0.5s;
        animation-duration: 0.5s;
        animation-name: rotateIn;
        animation-fill-mode: forwards;
    }

    .rotateOut {
        animation-duration: 0.5s;
        animation-name: rotateOut;
        animation-fill-mode: forwards;
    }
</style>

<MudCarousel Class="mud-width-full" Style="height:200px;" TData="object" AutoCycle="false">
    <MudCarouselItem Color="@Color.Primary" Transition="Transition.Slide">
        <div class="d-flex" style="height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
    <MudCarouselItem Color="@Color.Secondary" Transition="Transition.Fade">
        <div class="d-flex" style="height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
    <MudCarouselItem Color="@Color.Tertiary" Transition="Transition.Custom" CustomTransitionEnter="bounceIn" CustomTransitionExit="bounceOut">
        <div class="d-flex" style="height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
    <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="backInDown" CustomTransitionExit="backOutDown">
        <div class="d-flex" style="background-color:lightgray; height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Primary" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
    <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="rotateIn" CustomTransitionExit="rotateOut">
        <div class="d-flex" style="background-color:lightgray; height:100%">
            <MudIcon Class="mx-auto my-auto" Icon="@Icons.Custom.Brands.MudBlazor" Color="@Color.Secondary" Size="@Size.Large" />
        </div>
    </MudCarouselItem>
</MudCarousel>
